<template>
  <view class="desk-index" v-if="isShow">
    <u-sticky bgColor="#fff">
      <u-tabs
        :disabled="disabled"
        lineColor="#f3c45d"
        :activeStyle="{
          color: '#f3c45d',
          transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)'
        }"
        :list="list1"
        @click="click"
      ></u-tabs>
    </u-sticky>
    <view class="add-btn">
      <button style="height: 40rpx; line-height: 40rpx; background-color: #f3c45d; border-color: #f3c45d; color: #fff" class="uni-button" size="mini" type="default" @click="toAdd">
        立即绑定
      </button>
    </view>
    <view class="binding-info" v-if="codeInfo.status">
      <view style="color: #999; line-height: 40rpx">已绑定桌台：{{ codeInfo.deskName }}</view>
    </view>
    <scroll-view scroll-y class="table">
      <radio-group @change="radioRow">
        <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
          <uni-tr>
            <uni-th width="50" align="center"></uni-th>
            <uni-th width="120" align="center">桌台名称</uni-th>
            <uni-th align="center" width="90">用餐人数</uni-th>
            <uni-th align="center" width="90">绑定数量</uni-th>
            <!-- <uni-th width="180" align="center">设置</uni-th> -->
          </uni-tr>
          <uni-tr v-for="(item, index) in tableData" :key="index">
            <uni-td align="center">
              <view>
                <radio style="transform: scale(0.7)" :value="index" color="#f3c45d" />
              </view>
            </uni-td>
            <uni-td align="center">{{ item.name }}</uni-td>
            <uni-td align="center">{{ item.manQty }}</uni-td>
            <uni-td align="center">{{ item.bingdingCount }}</uni-td>
            <!-- <uni-td align="center">
              <view class="uni-group">
                <button
                  style="height: 40rpx; line-height: 40rpx; background-color: #f3c45d; border-color: #f3c45d; color: #fff"
                  class="uni-button"
                  size="mini"
                  type="default"
                  @click="toEdit(item.id)"
                >
                  修改
                </button>
                <button style="height: 40rpx; line-height: 40rpx" class="uni-button" size="mini" type="warn" @click="toDel(item.id)">删除</button>
              </view>
            </uni-td> -->
          </uni-tr>
        </uni-table>
      </radio-group>
    </scroll-view>
    <view v-if="tableData.length > 0" class="uni-pagination-box">
      <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { getFoodDeskCategoryList, getFoodDeskList, getQRCodeDetail, bindingCode } from '@/common/api.js';
export default {
  data() {
    return {
      disabled: false,
      // tab栏列表
      list1: [],
      // searchVal: '',
      // 表格列表
      tableData: [],
      // 每页数据量
      pageSize: 8,
      // 当前页
      pageCurrent: 1,
      // 数据总量
      total: 0,
      loading: false,
      typeId: 0,
      radioId: 0,
      scanId: 0,
      codeInfo: {},
      isShow: false
    };
  },
  methods: {
    click(item) {
      if (this.disabled) return;
      this.pageCurrent = 1;
      this.getTableList(item.id);
      this.typeId = item.id;
    },
    async getList() {
      // 获取顶部分类
      const res = await getFoodDeskCategoryList();
      this.list1 = res.data.list;
      this.typeId = res.data.list[0].id;
      this.getTableList(res.data.list[0].id);
      this.isShow = true;
    },
    async getTableList(typeId) {
      this.disabled = true;
      const result = await getFoodDeskList({ typeId, pageNum: this.pageCurrent, pageSize: this.pageSize, showBinding: true });
      this.tableData = result.data.list;
      this.total = result.data.total;
      this.disabled = false;
    },
    // 选中当前行表格
    radioRow(e) {
      const index = +e.detail.value;
      this.radioId = this.tableData[index].id;
    },
    async toAdd() {
      if (!this.radioId)
        return this.$refs.uToast.show({
          message: '请先选择桌台',
          type: 'error'
        });
      await bindingCode({ id: this.scanId, deskId: this.radioId, status: 1 });
      this.$refs.uToast.show({
        message: '绑定成功',
        type: 'success',
        complete() {
          uni.navigateBack();
        }
      });
    },
    to(path) {
      uni.navigateTo({
        url: path
      });
    },
    // 删除数据
    toDel(id) {
      console.log(id);
    },
    // toEdit(id) {
    //   console.log(id);
    // },
    // 表格页数
    change(e) {
      this.pageCurrent = e.current;
      this.getTableList(this.typeId);
    },
    // 唤起扫码
    scanCode() {
      const _that = this;
      uni.scanCode({
        success: async function (res) {
          console.log(res);
          _that.scanId = res.result.slice(res.result.indexOf('=') + 1);
          try {
            const res = await getQRCodeDetail({ id: _that.scanId });
            _that.codeInfo = res.data;
            _that.getList();
          } catch (e) {
            uni.navigateBack();
          }
        },
        fail() {
          uni.navigateBack();
        }
      });
    }
  },
  onLoad() {
    this.scanCode();
  }
};
</script>

<style scoped lang="scss">
view {
  box-sizing: border-box;
}
.desk-index {
  background-color: #fff;
  height: 100vh;
  padding: 0 20rpx;
  .binding-info {
    padding: 0 20rpx;
  }
  .add-btn {
    width: 26%;
    margin: 10rpx;
  }
  .table {
    padding: 20rpx;
    max-height: 80%;
    .uni-button {
      margin-right: 10rpx;
    }
  }
  .uni-pagination-box {
    width: 40%;
    margin: 0 auto;
  }
}
</style>
